<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>01 第一个vue代码</title>
  </head>
  <body>
    <div id="app">
      <!-- 视图层 -->
      <h1>1.用{{ }}渲染数据</h1>
      <p>{{ msg }}</p>

      <h1>2.双向数据绑定</h1>
      <input type="text" v-model="price" />
      <p>价格：{{ price }}</p>

      <!-- <input type="text" value="" id="test" />
      <p id="box">测试：</p> -->
    </div>
  </body>
  <script src="../node_modules/vue/dist/vue.js"></script>
  <script>
    //vue代码写这里：数据驱动视图的改变
    let vm = new Vue({
      //实例化
      el: "#app", //el 设置挂载点，里面写的是选择器,让里面的代码能够被vue管理。挂载点不能设置在html和body标签上
      data: {
        //data 存放数据的地方:数据层
        msg: "hello H52005 6666!",
        price: "90",
      },
    });

    // let test = document.querySelector("#test");
    // let box = document.querySelector("#box");
    // test.oninput = function () {
    //   console.log(this.value, 999);
    //   box.innerHTML = "测试:" + this.value;
    // };
  </script>
</html>
